:root {
   --primary-color: #46b8cc;
   --secondary-color: #5f9ea0;
   --light-bg: #f0f8ff;
}
#file {
   display: none;
}

main {
   width: 400px;
   /* margin: 2em auto; */
   margin: 2em;

}

/* 通用 */
.shadow {
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.mask {
   top: 0;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: hidden;
}
.mask-close {
   position: absolute;
   top: 8px;
   right: 8px;
   cursor: pointer;
   font-size: 1rem;
   color: #dedede;
   width: 26px;
   height: 26px;
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: hidden;
}
.mask-close:hover {
   background: #3e3a3a;
   border-radius: 50%;
}
.disabled {
   cursor: not-allowed !important;
}

.btn-group {
   display: flex;
   gap: 8px;
   margin-top: 4px;
}
.btn {
   padding: 8px 12px;
   color: white;
   cursor: pointer;
   border-radius: 4px;
   display: inline-block;
   border: none;
   font-size: 1rem;
   height: 32px;
   line-height: 32px;
   padding: 0 16px;
}
.btn-upload,
.btn-clear {
   background-color: rgba(70, 184, 204, 0.8);
}
.btn-upload:hover,
.btn-clear:hover {
   background-color: rgba(70, 184, 204, 0.6);
}

.btn-abort {
   background-color: rgba(204, 79, 70, 0.8);
}
.btn-abort:hover {
   background-color: rgba(204, 79, 70, 0.6);
}

/* 拖拽区域 */
.drop-area {
   height: 218px;
   border-width: 2px;
   border-style: solid;
   border-color: var(--primary-color);
   border-radius: 4px;
   background-color: var(--light-bg);
   position: relative;
}
.drop-area.highlight {
   border-style: dashed;
   background-color: #e5eff8;
}
.drop-area-text {
   position: absolute;
   top: 0;
   display: flex;
   height: 100%;
   width: 100%;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   color: var(--secondary-color);
   gap: 0.5rem;
}
.drop-area-helper {
   color: #ff5858;
   transition: all 0.5 ease;
   margin-top: 4px;
}

/* 图片预览 */
.image-preview-container {
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: 23% 23% 24% 24%;
   grid-template-rows: 32% 32% 32%;
   gap: 2%;
   padding: 4px;
   box-sizing: border-box;
}

.image-preview-container .preview-item {
   position: relative;
   display: flex;
   /* justify-content: center; */
   flex-direction: column;
   width: 100%;
   height: 100%;
   border-radius: 4px;
   background: #fdfdfd;
   padding: 4px 2px;
   box-sizing: border-box;
}

.image-preview-container .preview-item img {
   height: 75%;
   object-fit: contain;
}

.image-preview-container .preview-item span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
   padding-bottom: 2px;
}
.preview-item-mask{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
}
.preview-item-mask .progress-block{
   position: absolute;
   bottom: 0;
   left: 0;
   height: 0;
   width: 100%;
   background-color: rgba(70, 184, 204, 0.6);
   transition: height 0.5s ease;
}
.preview-item-mask .progress-text{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: large;
   color: var(--primary-color);
}


/* 进度条 */
.progress-bar {
   height: 3px;
   background-color: #f0f8ff;
   border-radius: 2px;
   width: 80%;
   position: relative;
}
.progress-bar-value {
   position: absolute;
   left: 0;
   height: 100%;
   background-color: var(--primary-color);
   width: 0;
   transition: width 0.5s ease;
}
.progress-bar-text {
   position: absolute;
   top: 6px;
   color: var(--primary-color);
   font-size: 12px;
}
